<template>
  <div class="comment-box">
    <div class="webcomment hidden-xs-only">
      <Introduce :title="title" :content="content"></Introduce>
      <W_MessageBox> </W_MessageBox>
      <W_CommentArea :commentlist="showComment">
        <!-- 作用域插槽 -->
        <template slot-scope="{ comment, replay_comment }">
          <W_MessageBox
            :comment="comment"
            :replay_comment="replay_comment"
          ></W_MessageBox>
        </template>
      </W_CommentArea>
    </div>
    <div class="modilecomment hidden-sm-and-up">
      <Introduce :title="title" :content="content"></Introduce>
      <M_MessageBox></M_MessageBox>
      <M_CommentArea :commentlist="showComment">
        <!-- 作用域插槽 -->
        <template slot-scope="{ comment, replay_comment }">
          <M_MessageBox
            :comment="comment"
            :replay_comment="replay_comment"
          ></M_MessageBox>
        </template>
      </M_CommentArea>
    </div>
  </div>
</template>

<script>
import M_MessageBox from "../components/M_MessageBox.vue";
import W_MessageBox from "../components/W_MessageBox.vue";
import M_CommentArea from "../components/M_CommentArea.vue";
import W_CommentArea from "../components/W_CommentArea.vue";
import Introduce from "../components/Introduce.vue";
import { mapState } from "vuex";
export default {
  name: "Comments",
  data() {
    return {
      show: true,
      title: "留言",
      content:
        "从大一打算学C++，但没想到却走了学Java的路，本来就单纯的想做个后端， 没想到前端也要了解，这个暑假我又把前端的三剑客和Vue又重新学了一遍，却 又发现想完整的做一个项目，还需 要会UI画图，前几天学了PS，发现现在市 场上早就不用PS做UI了，于是又学了现在的XD(虽然不是主流)。自己做的项目需要 上线，必须要会点运维，好在之前就自学了Docker和Nignx。真神奇，不知不觉把自己 逼成全栈了。 若你也有类似的经历，欢迎留言与我分享",
    };
  },
  components: {
    W_MessageBox,
    M_MessageBox,
    M_CommentArea,
    W_CommentArea,
    Introduce,
  },
  computed: {
    ...mapState("commentList", ["showComment"]),
  },
  mounted() {
    this.$store.dispatch(
      "commentList/getCommentListByBlogID",
      this.$route.query.id
    );
  },
};
</script>

<style lang="less" scoped>
@rem: 32rem;
.webcomment {
  max-width: (1170 / @rem);
  margin: 0 auto;
  padding-top: (200 / @rem);
  font-size: (20 / @rem);
}
.modilecomment {
  max-width: (1250 / @rem);
  min-width: 96%;
  margin: 0 auto;
  padding-top: (200 / @rem);
  font-size: 16px;
}
</style>